
	<div class="container">
		<div class="page-header">
			<h1>Language Manager</h1>
		</div>
		<div class="panel panel-default">
			<div class="panel-body">
				<form class="form-inline" method="post" id="language_search_form">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="language code"
							id="languageCode">
						<input type="text" class="form-control" placeholder="language name"
							id="languageName">
					</div>
					<button type="submit" class="btn btn-default">
						<i class="fa fa-search"></i> Search
					</button>
					<button type="submit" class="btn btn-default">
						<i class="fa fa-reset"></i> Reset
					</button>
				</form>
			</div>
		</div>
		<div id="Language_tt" class="easyui-tabs" data-options="tabWidth:118" style="height:360px">
			<div title="国际化">
				<div id="language_list">
					<table class="easyui-datagrid" 
						data-options="
							rownumbers: true,
							url: 'datagrid_data1.json',
							method: 'get',
							onLoadSuccess: onLoadSuccess
						">
					<thead>
						<tr>
							<th data-options="field:'productid',width:120">Item Index</th>
							<th data-options="field:'itemid',width:180">Item Code</th>
							<th data-options="field:'listprice',width:110,align:'right'">Value</th>
							<th data-options="field:'unitcost',width:110,align:'right'">Language</th>
							<th data-options="field:'attr1',width:120">Create User</th>
							<th data-options="field:'status',width:120,align:'center'">Create Date</th>
							<th data-options="field:'attr1',width:120">Update User</th>
							<th data-options="field:'status',width:120,align:'center'">Update Date</th>
						</tr>
					</thead>
					<tbody>
		                <tr>
						    <td rowspan="2" valign="middle">1</td>
						    <td rowspan="2" valign="middle">app.international.code</td>
						    <td valign="middle">编码</td>
						    <td valign="middle">EN</td>
						    <td rowspan="2" valign="middle">dzg</td>
						    <td rowspan="2" valign="middle">2016/08/15</td>
						    <td rowspan="2" valign="middle">dzg</td>
						    <td rowspan="2" valign="middle">2016/08/15</td>
						  </tr>
						  <tr>
						    <td valign="middle">Code</td>
						    <td valign="middle">CN</td>
						  </tr>
						  
						  <tr>
						    <td rowspan="2" valign="middle">2</td>
						    <td rowspan="2" valign="middle">app.international.code</td>
						    <td valign="middle">编码</td>
						    <td valign="middle">EN</td>
						    <td rowspan="2" valign="middle">dzg</td>
						    <td rowspan="2" valign="middle">2016/08/15</td>
						    <td rowspan="2" valign="middle">dzg</td>
						    <td rowspan="2" valign="middle">2016/08/15</td>
						  </tr>
						  <tr>
						    <td valign="middle">Code</td>
						    <td valign="middle">CN</td>
						  </tr>
				    </tbody>
				</table>
				<script type="text/javascript">
					function onLoadSuccess(data){
						var merges = [{
							index: 2,
							rowspan: 2
						},{
							index: 5,
							rowspan: 2
						},{
							index: 7,
							rowspan: 2
						}];
						for(var i=0; i<merges.length; i++){
							$(this).datagrid('mergeCells',{
								index: merges[i].index,
								field: 'productid',
								rowspan: merges[i].rowspan
							});
						}
					}
				</script>
				</div>
			</div>
		</div>
	</div>

	<div class="modal" id="language_modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title"></h4>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary"
						id="language_modal_submit">
						<i class="fa fa-save"></i> Save
					</button>
				</div>
			</div>
		</div>
	</div>

<script type="text/x-handlebars-template"
		id="language_table_template">
    <table class="table table-hover" id="language_table">
            <thead>
                <tr>
    <td>Item Index</td>
    <td>Item Code</td>
    <td>Value</td>
    <td>Language</td>
    <td>Create User</td>
    <td>Create Date</td>
    <td>Update User</td>
    <td>Update Date</td>
  </tr>
            </thead>
            <tbody>
                {{#data}}
                    {{> tr}}
                {{/data}}
            </tbody>
	</table>
</script>

	<script type="text/x-handlebars-template-partial"
		id="language_table_tr_template">
    <tr data-id="{{itemId}}" data-name="{{itemName}}">
        <td>{{itemId}}</td>
        <td>{{itemName}}</td>
        <td>{{url}}</td>
        <td>{{icon}}</td>
        <td>{{leaf}}</td>
        <td>{{orderCode}}</td>
        <td>{{createdUser}}</td>
        <td>{{createdDate}}</td>
        <td>{{updateLastUser}}</td>
        <td>{{updateLastDate}}</td>
        <td>
            <button class="btn btn-xs btn-primary navigation_edit" title="Edit"><i class="fa fa-fw fa-edit"></i></button>
            <button class="btn btn-xs btn-default navigation_delete" title="Delete"><i class="fa fa-fw fa-trash-o"></i></button>
        </td>
    </tr>
</script>

	<script type="text/x-handlebars-template"
		id="language_modal_form_template">
    <form>
        <input type="hidden" id="itemId" value="{{itemId}}">
		<input type="hidden" id="parentId" value="{{parentId}}">
        <div class="form-group">
            <label for="itemName">名称:</label>
            <input type="text" value="{{itemName}}" class="form-control" id="itemName">
        </div>
        <div class="form-group">
            <label for="url">地址:</label>
            <input type="text" value="{{url}}" class="form-control" id="url">
        </div>
        <div class="form-group">
            <div class="form-group">
            	<label for="orderCode">排序码:</label>
            	<input type="text" value="{{orderCode}}" class="form-control" id="orderCode">
        	</div>
            <div class="form-group">
            	<label for="icon">小图标:</label>
            	<input type="text" value="{{icon}}" class="form-control" id="icon">
        	</div>
        </div>
    </form>
</script>

	<script src="js/LanguageView.js"></script>
	<script src="js/LanguageService.js"></script>


	<script>
		$(function() {
			
			$('#Language_tt').tabs({
				plain: true
			})
			
			// 显示所有产品
			//$('body').hide(); // 隐藏界面
			LanguageService.findLanguages(function() {
				$('body').show(); // 显示界面
			});

			// 根据关键字查询产品
			$('#language_search_form').on('submit', function() {
				var keyword = $('#keyword').val().trim();
				LanguageService.findLanguagesByName(keyword);
				return false;
			});

			// 点击 Edit 按钮，弹出编辑产品对话框
			$(document).on('click', '#language_table .navigation_edit',
					function() {
						var $tr = $(this).closest('tr');
						var itemId = $tr.data('id');
						LanguageService.findLanguageById(itemId);
						$('#language_modal').modal('show');
						return false;
					});

			// 点击 Delete 按钮，删除产品
			$(document).on(
					'click',
					'#language_table .navigation_delete',
					function() {
						var $tr = $(this).closest('tr');
						var itemId = $tr.data('id');
						var name = $tr.data('name');
						console.warn(itemId, name);
						if (confirm('Do you want to delete this navigation? ['
								+ name + ']')) {
							LanguageService.deleteLanguageById(itemId);
						}
						return false;
					});

			// 点击 Create 按钮，弹出创建产品对话框
			$('#language_create').on('click', function() {
				var title = 'Create Language';
				var navigation = {
					itemId : 0,
					itemName : '',
					orderCode : '',
					icon : '',
					url : ''
				};
				LanguageView.renderLanguageModal(title, navigation);
				$('#language_modal').modal('show');
			});

			// 点击对话框中的 Save 按钮，创建或更新产品
			$('#language_modal_submit').on('click', function() {
				var id = $('#itemId').val();
				var navigation = {
					itemId : id,
					parentId : $('#parentId').val().trim(),
					itemName : $('#itemName').val().trim(),
					orderCode : $('#orderCode').val().trim(),
					icon : $('#icon').val().trim(),
					url : $('#url').val().trim()
				};
				console.warn(id, navigation);
				if (id == 0) {
					LanguageService.createLanguage(navigation);
				} else {
					LanguageService.updateLanguage(navigation);
				}
				$('#language_modal').modal('hide');
			});
			//
		});
	</script>

<style type="text/css">
	.tabs-title{width:138px;}
</style>

